<template>
  <div class="promotions-container">
    <el-card>
      <div slot="header">
        <span>优惠活动</span>
      </div>
      
      <div v-loading="loading">
        <div v-if="promotions.length > 0" class="promotion-list">
          <el-card 
            v-for="promotion in promotions" 
            :key="promotion.id" 
            class="promotion-item"
            shadow="hover">
            <div class="promotion-title">{{ promotion.title }}</div>
            <div class="promotion-description">{{ promotion.description }}</div>
            <div class="promotion-discount" v-if="promotion.discountRate">
              <span class="discount-label">折扣率:</span>
              <span class="discount-value">{{ (promotion.discountRate * 10).toFixed(1) }}折</span>
            </div>
            <div class="promotion-discount" v-if="promotion.discount">
              <span class="discount-label">优惠金额:</span>
              <span class="discount-value">¥{{ promotion.discount.toFixed(2) }}</span>
            </div>
            <div class="promotion-time">
              <div>{{ formatDate(promotion.startTime) }} 至 {{ formatDate(promotion.endTime) }}</div>
            </div>
          </el-card>
        </div>
        
        <el-empty v-else description="暂无优惠活动"></el-empty>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
import { formatDate } from '@/utils/date'

export default {
  name: 'Promotions',
  data() {
    return {
      promotions: [],
      loading: false
    }
  },
  created() {
    this.fetchPromotions()
  },
  methods: {
    formatDate,
    async fetchPromotions() {
      this.loading = true
      try {
        const res = await axios.get('/api/promotion/list').then(res => res.data)
        if (res.code === 200) {
          this.promotions = res.data
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        this.$message.error('获取优惠活动失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.promotions-container {
  padding: 20px;
}
.promotion-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.promotion-item {
  border-left: 4px solid #409EFF;
}
.promotion-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
}
.promotion-description {
  color: #606266;
  margin-bottom: 15px;
}
.promotion-discount {
  margin-bottom: 5px;
}
.discount-label {
  font-weight: bold;
  margin-right: 5px;
}
.discount-value {
  color: #F56C6C;
  font-size: 16px;
  font-weight: bold;
}
.promotion-time {
  font-size: 12px;
  color: #909399;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .promotion-list {
    grid-template-columns: 1fr;
  }
}
</style> 